<template>
  <view class="home-page2">
    <Navbar title="金仕咨询" background="#fff"></Navbar>
    <view class="banner-box">
      <!-- 轮播图 -->
      <view class="swiper-container">
        <swiper  class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
          <swiper-item @click="clickBanner(index)" v-for="(item, index) in bannerList" :key="index">
            <image :src="item.image" class="banner-image" mode="aspectFill"></image>
          </swiper-item>
        </swiper>
      </view>

      <!-- 金刚区导航 -->
      <view class="nav-grid">
        <view class="nav-item" v-for="(item, index) in navList" :key="index" @click="navigateTo(item.path)">
          <image :src="item.icon" class="nav-icon" mode="aspectFit"></image>
          <text class="nav-text">{{ item.name }}</text>
        </view>
      </view>
    </view>
    <view class="notice-box">
      <u-notice-bar speed="120" border-radius="8" bg-color="#E0EFFF" color="#3373BD" mode="horizontal" :list="noticeList"></u-notice-bar>
    </view>

    <!-- 金刚功能区 -->
    <view class="feature-section">
      <view class="feature-grid">
        <view
            class="feature-card"
            v-for="(item, index) in featureList"
            :key="index"
            @click="navigateToFeature(item.path)"
        >
          <view class="feature-title">{{ item.title }}</view>
          <image :src="item.icon" class="feature-icon" mode="aspectFit"></image>
        </view>
      </view>
    </view>

    <view class="course-section">
      <image src="/static/home/course_bg.png" class="course-bg" mode="widthFix"></image>
    </view>
  </view>
</template>

<script>
import Navbar from "../../components/Navbar.vue";
import api from "../../config/api.js";

export default {
  components: {Navbar},
  data() {
    return {
      // 轮播图数据
      bannerList: [],
      // 金刚区导航数据
      navList: [
        {
          name: '历年真题',
          icon: '/static/home/1.png',
          path: '/pages/service/service'
        },
        {
          name: '考情分析',
          icon: '/static/home/2.png',
          path: '/pages/service/service'
        },
        {
          name: '经验分享',
          icon: '/static/home/3.png',
          path: '/pages/service/service'
        },
        {
          name: '课程介绍',
          icon: '/static/home/4.png',
          path: '/pages/interview/register'
        }
      ],
      noticeList: [],
      // 金刚功能区数据
      featureList: [
        {
          title: '付费咨询',
          icon: '/static/home/2-1.png',
          path: '/pages/service/service',
        },
        {
          title: '自我介绍修改',
          icon: '/static/home/2-2.png',
          path: '/pages/mine/edit',
        },
        {
          title: '联系客服',
          icon: '/static/home/2-3.png',
          path: '/pages/service/service',
        }
      ]
    }
  },
  onLoad() {
    this.loadNoticeData();
    this.loadBannerData();
  },
  methods: {
    // 加载公告数据
    async loadNoticeData() {
      try {
        const params = {
          position: 'interview', // 面试页面
          status: 1, // 只获取启用的公告
        };

        const response = await api.getNoticeList(params);

        if (response && response.length > 0) {
          // 将公告标题提取为数组
          this.noticeList = response.map(item => item.title);
        } else {
          // 如果没有公告数据，使用默认数据
          this.noticeList = [
            '欢迎使用金仕咨询面试系统',
            '系统正在持续优化中，如有问题请联系客服'
          ];
        }
      } catch (error) {
        console.error('加载公告数据失败:', error);
        // 使用默认数据
        this.noticeList = [
          '欢迎使用金仕咨询面试系统',
          '系统正在持续优化中，如有问题请联系客服'
        ];
      }
    },

    // 加载轮播图数据
    async loadBannerData() {
      try {
        const params = {
          position: 'interview', // 面试页面
          status: 1, // 只获取启用的轮播图
        };

        const response = await api.getBannerList(params);

        if (response && response.length > 0) {
          // 将后端数据映射为前端需要的格式
          this.bannerList = response.map(item => ({
            id: item.id,
            image: item.image_url,
            url: item.link_url,
            product_id: item.product_id
          }));
        } else {
          // 如果没有轮播图数据，使用默认数据
          this.bannerList = [

          ];
        }
      } catch (error) {

      }
        },

    // 轮播图点击事件
    clickBanner(e) {
      // 获取当前点击的轮播图索引
      const banner = this.bannerList[e];
      if (banner.product_id) {
        // 产品详情页
        uni.navigateTo({
          url: `/pages/product/detail?id=${banner.product_id}`
        });
      }
      return
      if (banner && banner.url) {
        // 如果有链接，则跳转
        if (banner.url.startsWith('/pages/')) {
          // 内部页面跳转
          uni.navigateTo({
            url: banner.url
          });
        } else if (banner.url.startsWith('http')) {
          // 外部链接
          uni.navigateTo({
            url: `/pages/webview/webview?url=${encodeURIComponent(banner.url)}`
          });
        }
      }
    },

    // 导航跳转
    navigateTo(path) {
      uni.navigateTo({
        url: path
      });
    },
    // 金刚功能区跳转
    navigateToFeature(path) {
      uni.navigateTo({
        url: path
      });
    }
  },

  onShareAppMessage() {
  },
  onShareTimeline() {
  },
}
</script>

<style lang="scss">
.home-page2 {
  min-height: 100vh;
  overflow: visible;
  padding-bottom: 60rpx;
  position: relative;
  z-index: 1;
  background-color: #f5f5f5;

  .course-section {
    padding: 24rpx;

    .course-bg {
      width: 100%;
      height: 294rpx;
    }
  }

  .banner-box {
    border-radius: 0 0 32rpx 32rpx;
    background: #FFFFFF;
    display: flex;
    flex-direction: column;
    padding: 32rpx;

    // 轮播图样式
    .swiper-container {
      margin-bottom: 40rpx;
      border-radius: 16rpx;
      overflow: hidden;

      .swiper {
        height: 300rpx;

        .banner-image {
          width: 100%;
          height: 100%;
        }
      }
    }

    // 金刚区导航样式
    .nav-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .nav-item {
        width: 25%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 20rpx 0;

        .nav-icon {
          width: 110rpx;
          height: 110rpx;
          margin-bottom: 16rpx;
        }

        .nav-text {
          font-size: 30rpx;
          color: #333333;
          text-align: center;
          line-height: 1.2;
        }
      }
    }
  }

  .notice-box {
    padding: 24rpx;
    border-radius: 16rpx;
  }

  // 金刚功能区样式
  .feature-section {
    padding: 0 24rpx;
    border-radius: 16rpx;

    .feature-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;

      .feature-card {
        width: 30%; // 三列布局
        height: 180rpx;
        border-radius: 16rpx;
        box-sizing: border-box;
        position: relative;

        .feature-title {
          color: #fff;
          font-size: 30rpx;
          font-weight: bold;
          margin-bottom: 16rpx;
          text-align: left;
          padding: 24rpx 12rpx;
          position: relative;
          z-index: 2;
        }

        .feature-icon {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
</style>
